<template>
  <echarts2 :id="echartId" :option="option5" :styles="styles1"></echarts2>
</template>

<script>
import echarts from "echarts";
import echarts2 from "@/components/echarts.vue";

export default {
  name: "pieechart",
  props: {
    pieNameList: {
      type: Array,
      default: () => {
        // return ["I 级风险", "II 级风险", "III 级风险", "IV 级风险"];
        return [];
      }
    },
    pieData:  {
      type: Array,
      default: () => {
        // return ["I 级风险", "II 级风险", "III 级风险", "IV 级风险"];
        return [];
      }
    },
    echartId: {
      type: String
    }
  },
  data() {

    return {
      styles1: {
        width: "100%",
        height: "100%",
        margin: "0 auto"
      },
      option5: {
        barWidth: 10,
        // barGap:'80%',
        // title: {
        //   text: "风险",
        //   color: "#fff",
        //   left: "66%",
        //   top: "45%",
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 12
        //   }
        // },
        title: {
          text: '年各类材料库存情况',
          left: 'center',
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        tooltip: {
          // trigger: 'item',
          formatter: " {b}<br/>{c}<br/> ({d}%)"
        },
        legend: {
          // orient: "vertical",
          // x: 10,
          // y: "center",
          left: 'center',
          bottom: 2,
          left: 'center',
          icon: "roundRect", //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 5, // 设置宽度
          itemHeight: 5, // 设置高度
          itemGap: 10, // 设置间距
          data: this.pieNameList,
          // data: ["I 级风险", "II 级风险", "III 级风险", "IV 级风险"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            type: "pie",
            // radius: ["30%", "50%"],
            radius: "65%",
            center: ["50%", "50%"],
            borderWidth: 10,
            avoidLabelOverlap: false,
            data: this.pieData,
            /* [
              { value: 335, name: "I 级风险", itemStyle: { color: "#D32F30" } },
              {
                value: 200,
                name: "II 级风险",
                itemStyle: { color: "#F28C1D" }
              },
              {
                value: 145,
                name: "III 级风险",
                itemStyle: { color: "#FFF45C" }
              },
              { value: 120, name: "IV 级风险", itemStyle: { color: "#0041FB" } }
            ],
            */
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            }
          }
        ]
      }
    }
  },
  components: {
    echarts2
  },

};
</script>
<style lang="scss" scoped>
</style>
